////
/// Content
/// UniqueDropzone
////

@import 'utils/shared/functions';

$grid-area-names: a, b, c, d, e, f, g, h;
$grid-rows: 6;
$grid-columns: 4;

.UniqueDropzone {
  .BlockLayout {
    .BlockWrapper {
      .Block:nth-child(1n + 3):not(.draggable-source--is-dragging) {
        min-height: 0;
        height: 0;
      }
    }
  }

  .BlockLayout--typeFlex {
    .BlockWrapper {
      flex: 1 1 calc(50% - #{get-layout-length(gutter)});

      @media screen and (min-width: get-breakpoint(mobile, wide)) {
        flex-basis: calc(25% - #{get-layout-length(gutter)});
      }
    }
  }

  .BlockLayout--typeGrid {
    grid-template-rows: repeat($grid-rows, 1fr);
    grid-template-columns: repeat($grid-columns, 1fr);
    grid-template-areas:
      'a a b b'
      'a a d d'
      'c c d d'
      'e e f f'
      'e e g g'
      'h h h h';
    margin-top: get-border(thin);
    border: get-border(thin) solid get-color(coal, dark);
    background-color: get-color(coal, dark);

    @media screen and (min-width: get-breakpoint(tablet)) {
      // special fractions to line up with the flexContainer
      grid-template-columns: 1fr 1.025fr 1.025fr 1fr;
      grid-template-areas:
        'a c c g'
        'a c c g'
        'a d f g'
        'b d f g'
        'b e f h'
        'b e f h';
      margin-top: get-border();
      border-width: get-border();
    }

    .BlockWrapper--isDropzone {
      &::before {
        content: '';
        position: absolute;
        top: -(get-border(thin));
        right: -(get-border(thin));
        bottom: -(get-border(thin));
        left: -(get-border(thin));
        display: block;
        pointer-events: none;
        background-color: get-color(brand, blue);
        opacity: 0;
        transition: opacity get-duration(fast) get-easing();

        // stylelint-disable-next-line max-nesting-depth
        @media screen and (min-width: get-breakpoint(tablet)) {
          top: -(get-border());
          right: -(get-border());
          bottom: -(get-border());
          left: -(get-border());
        }
      }

      // not focusable, but, whatever... this was hard to solve
      &.draggable-dropzone--occupied:hover {
        // stylelint-disable-next-line max-nesting-depth
        &::before {
          opacity: 1;
        }
      }
    }

    .BlockContent {
      border: 0;
    }

    @for $i from 1 through length($grid-area-names) {
      .BlockWrapper:nth-child(#{$i}) {
        grid-area: nth($grid-area-names, $i);
      }
    }
  }

  // stylelint-disable-next-line no-duplicate-selectors
  .BlockLayout--typeFlex {
    .BlockContent {
      @media screen and (min-width: get-breakpoint(tablet)) {
        min-height: rows(3);
      }

      @media screen and (min-width: get-breakpoint(desktop)) {
        min-height: rows(4);
      }
    }
  }

  // not quite lining up with the rows correctly...
  // will likely need to tweak `grid` values
  // stylelint-disable-next-line no-duplicate-selectors
  .BlockLayout--typeGrid {
    // stylelint-disable-next-line no-duplicate-selectors
    .BlockContent {
      @media screen and (min-width: get-breakpoint(tablet)) {
        min-height: rows(3, false, true);
      }

      @media screen and (min-width: get-breakpoint(desktop)) {
        min-height: rows(4, false, true);
      }
    }
  }
}
